<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>响应式模态框</title>

<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/modal.css">
</head>

<body>
<!--<div class="demo-btns">-->
  <div>
  <header>
    <h1>响应式模态框</h1>
  </header>
  <div class="info">
    <div class="buttons">
      <p> <a href="" data-modal="#modal" class="modal__trigger">演示 1</a> <a href="" data-modal="#modal2" class="modal__trigger">演示 2</a> <a href="" data-modal="#modal3" class="modal__trigger">演示 3</a> </p>
    </div>
    <p>单击按钮激活模式。<br>
   
  </div>
</div>

<!-- Modal -->
<div id="modal" class="modal modal__bg" role="dialog" aria-hidden="true">
  <div class="modal__dialog">
    <div class="modal__content">
      <h1>Modal</h1>
      <p>Church-key American Apparel trust fund, cardigan mlkshk small batch Godard mustache pickled bespoke meh seitan. Wes Anderson farm-to-table vegan, kitsch Carles 8-bit gastropub paleo YOLO jean shorts health goth lo-fi. Normcore chambray locavore Banksy, YOLO meditation master cleanse readymade Bushwick.</p>
      
      <!-- modal close button --> 
      <a href="" class="modal__close demo-close">
      <svg class="" viewBox="0 0 24 24">
        <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/>
        <path d="M0 0h24v24h-24z" fill="none"/>
      </svg>
      </a> </div>
  </div>
</div>
<div id="modal2" class="modal modal--align-top modal__bg" role="dialog" aria-hidden="true">
  <div class="modal__dialog">
    <div class="modal__content">
      <h1>Big Modal</h1>
      <h3>This modal is pretty tall.</h3>
      <p>Selfies normcore four dollar toast four loko listicle artisan. Hoodie Marfa authentic, wayfarers church-key tofu Banksy pop-up Kickstarter Brooklyn heirloom swag synth. Echo Park cray synth mixtape. Tofu gastropub squid readymade, trust fund Wes Anderson DIY PBR 8-bit try-hard +1 Shoreditch lo-fi tote bag.</p>
      <p><img src="http://unsplash.it/600/300" alt="" /></p>
      <p>Mumblecore cred selfies fingerstache. Tousled skateboard plaid lo-fi shabby chic salvia, swag Odd Future Etsy art party Austin cronut. Crucifix whatever Pinterest food truck, pickled viral cray 90's DIY chambray keffiyeh biodiesel Vice blog. Cred meh yr tofu.</p>
      <p>Mumblecore cred selfies fingerstache. Tousled skateboard plaid lo-fi shabby chic salvia, swag Odd Future Etsy art party Austin cronut. Crucifix whatever Pinterest food truck, pickled viral cray 90's DIY chambray keffiyeh biodiesel Vice blog. Cred meh yr tofu.</p>
      <!-- modal close button --> 
      <a href="" class="modal__close demo-close">
      <svg class="" viewBox="0 0 24 24">
        <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/>
        <path d="M0 0h24v24h-24z" fill="none"/>
      </svg>
      </a> </div>
  </div>
</div>
<div id="modal3" class="modal modal__bg" role="dialog" aria-hidden="true">
  <div class="modal__dialog">
    <div class="modal__content">
      <h1>Modal 3</h1>
      <p>Church-key American Apparel trust fund, cardigan mlkshk small batch Godard mustache pickled bespoke meh seitan. Wes Anderson farm-to-table vegan, kitsch Carles 8-bit gastropub paleo YOLO jean shorts health goth lo-fi.</p>
      
      <!-- modal close button --> 
      <a href="" class="modal__close demo-close">
      <svg class="" viewBox="0 0 24 24">
        <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/>
        <path d="M0 0h24v24h-24z" fill="none"/>
      </svg>
      </a> </div>
  </div>
</div>
<script src="js/modal.js"></script>
</body>
</html>
